<template>
  <!-- 统计面板 -->
  <a-collapse :bordered="false" v-model="activeKey" expand-icon-position="right"  :class="['mb12', notExpand && 'notExpand']">
    <a-collapse-panel style="background: #e6f3fc; border: none" :showArrow="false" :disabled="notExpand">
      <!-- 汇总面板 -->
      <template slot="header">
        <a-row type="flex" justify="space-between" align="middle" style="width: 100%">
          <div>
            <a-icon style="color: #108ee9" class="mr20" type="exclamation-circle" />
            <slot name="left" :data="countInfo" />
          </div>
          <div v-if="!notExpand">
            <slot name="right" />
            <a class="btn_right">
              <span>{{ activeKey.length > 0 ? '收起' : '展开' }}详细汇总信息</span>
              <a-icon :type="activeKey.length > 0 ? 'up' : 'down'" />
            </a>
          </div>
        </a-row>
      </template>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import { Collapse } from 'ant-design-vue' // ant
import { STable } from '@/components' // 表格

export default {
  name: 'CollapseStatic',
  components: {
    STable,
    ACollapse: Collapse,
    ACollapsePanel: Collapse['Panel']
  },
  props: {
    // 表头
    columnsSummary: {
      type: [Array],
      default: () => []
    },
    // 汇总标题
    tabList: {
      type: Array,
      default: () => []
    },
    // 列表api
    loadDataSummaryApi: {
      type: Object,
      default: () => ({})
    },
    // 替换参数集
    replaceFields: {
      type: Object,
      default: () => ({
        key: 'key',
        name: 'name',
        tableKey: 'id'
      })
    },
    // 汇总参数
    form: {
      type: Object,
      default: () => ({})
    },
    // 汇总回调参数字段名
    countObjString: {
      type: String,
      default: () => 'countTable'
    },
    // 加载表格计数器
    loadCount: {
      type: [Number, String],
      default: () => 0
    },
    // 闭合时不传args的参数
    closeWithNoArgs: {
      type: Boolean,
      default: false
    },
    //是否禁用不展开
    notExpand:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      activeKey: [], // tabs控件
      args: {
        type: '0'
        // ids: [], // 表格选中集合
      },
      countInfo: {}, // 汇总对象
    }
  }
}
</script>
<style scoped lang="less">
@deep: ~'>>>';
.notExpand{
   @{deep} .ant-collapse-header{
    color: #000;
    cursor:pointer
  }
}
</style>

